<template>
  <MainDetails/>
  <BgLine/>
  <SelectBox :map="map" @fartherFn="selectColor" id="card"/>
  <div class="bg">
    <div class="_main">
      <div class="_main_name">—— {{$t("card.choose")}} ——</div>
      <div class="_main_1">
        <div class="_main_1_ut">
          <div @click="showSelect">{{colorStr}}</div>
          <div @click="powerRank">{{$t("bag.rank")}}<span :class="isPowerAsc? '': 'down'"></span></div>
        </div>
        <div class="_main_1_num">{{$t("bag.total")}}{{hero.length}}{{$t("bag.tickets")}}</div>
      </div>
      <div class="_main_2">
        <div v-for="{heroName,level,levelCombatPower,src, color, id, checked, bg} in hero" :key="id">
          <img :src="bg" alt="" class="box_bg"/>
          <img :src="src" alt="">
          <div @click="activeChecked(id, !checked)"  :class="checked?'_img_patch_up':'_img_select'"></div>
          <div class="_img_name">{{heroName}}</div>
          <div class="_img_level">{{$t("starBegin")}}{{level}}{{$t("star")}}</div>
          <div class="_img_zl">{{$t("power")}}{{levelCombatPower}}</div>
        </div>
      </div>
    </div>
    <div class="_main_3">
      <div></div>
      <div @click="put">{{$t("card.put")}}</div>
    </div>
  </div>
</template>

<script>
  import MainDetails from "@components/MainDetails/index.vue";
  import BgLine from '@components/BgLine/index.vue';
  import http from "../../http";
  import SelectBox from '@components/Select/index.vue';
  const modules = import.meta.globEager("/src/assets/Hero/**");

  export default {
    data() {
      return {
        modules: modules,
        slotId: this.$route.query.slot * 1,
        colorStr: this.$t("bag.attribution"),
        color: '-1',
        isPowerAsc: true,
        hero: [],
        map: {}
      }
    },
    methods: {
      put: async function(){
        let id;
        this.hero.forEach(item => {
          if(item.checked){
            id = item.id;
          }
        });
        if(!id) {
          Toast(this.$t("card.tips"));
          return ;
        }
        let res = await http.post(`/api/user-card-slot/putSlot?slotId=${this.slotId}&heroId=${id}`, true);
        if (res.code === 200) {
          Toast(this.$t("operationSuccess"));
          this.$router.back();
        }
      },
      open: function(type){
        this.$router.push("/OpenBlindBox?type=" + type);
      },
      powerRank: function(){
        this.isPowerAsc = !this.isPowerAsc;
        this.getBox();
      },
      selectColor: function({k, v}){
        this.color = k;
        this.colorStr = v;
        this.getBox();
      },
      showSelect: function(){
        this.$store.commit('changeSelectType', "card");
      },
      activeChecked: function(id, targetStatus){
        this.hero.forEach(item => {
          if(item.id === id){
            item.checked = targetStatus;
          }else{
            if(targetStatus){
              item.checked = false;
            }
          }
        })
      },
      getColorMap: async function(){
        let res = await http.get(`/api/user-hero/getColorMap`);
        res.data["-1"] = this.$t("bag.attribution");
        this.map = res.data;
      },
      getBox: async function () {
        let color = this.color;
        let isPowerAsc = this.isPowerAsc;
        let param = "";
        if(color != '-1'){
          param += ('&color=' + color);
        }
        if(isPowerAsc !== ''){
          param += ('&isPowerAsc=' + isPowerAsc);
        }
        if(param !== ''){
          param = "?" + param.substring(1);
        }
        let res = await http.get(`/api/user-hero/myHeroInBag` + param);
        if (res.code === 200) {
          res.data.forEach((item) => {
            item.src = modules['/src/assets/Hero/' + item.color + "/" + item.hero +'.png'].default;
            item.bg = modules['/src/assets/Hero/' + item.color +'.png'].default;
          });
          this.hero = res.data;
        }
      }
    },
    mounted() {
      this.getColorMap();
      this.getBox();
    },
    components: {
      MainDetails,
      BgLine,
      SelectBox
    }
  }

</script>

<style scoped lang="scss">
  ._main {
    padding: 20px 15px 60px;
  }

  ._main_name {
    font-size: 18px;
    @include fontTCMedium;
    font-weight: 500;
    color: $color3;
    line-height: 25px;
  }

  ._main_1 {
    @include flex;
    margin-top: 22px;
  }
  .bg {
    flex: 1;
    background: rgba(0,0,0,.9);
  }
  ._main_1_ut {
    display: flex;

    div {
      width: 92px;
      height: 32px;
      color: $color3;
      font-size: 13px;
      line-height: 34px;
      text-align: left;
      padding-left: 11px;
      margin-right: 29px;

      &:nth-child(1) {
        background: url("@/assets/mypackage/icon_property.png") no-repeat center;
        background-size: cover;
      }

      &:nth-child(2) {
        width: 90px;
        height: 30px;
        border-radius: 3px;
        border: 1px solid #D8BC84;
        line-height: 30px;
        position: relative;

        span {
          width: 12px;
          height: 7px;
          background: url("@/assets/mypackage/icon_select.png") no-repeat center;
          background-size: cover;
          position: absolute;
          right: 8px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  ._main_1_num {
    width: 73px;
    height: 26px;
    background: url("@/assets/mypackage/111.png") no-repeat center;
    background-size: cover;
    font-size: 13px;
    @include fontTCRegular;
    font-weight: 400;
    color: #894801;
    line-height: 26px;
  }

  ._main_1_t {
    @include flex;
    height: 46px;
    width: 100%;
    background-color: #967E64;
    padding: 0 15px;
    margin-top: 15px;

    div {
      color: rgba(216, 188, 132, .45);
      font-size: 15px;
      @include fontSCRegular;

      &:nth-child(1) {
        color: #FFB522;
      }
    }
  }

  ._main_2 {
    width: 100%;
    margin-top: 25px;
    font-size: 0;
    @include flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    > div {
      position: relative;
      width: 103px;
      margin-left: 18px;
      &:nth-child(3n+1){
        margin-left: 0
      }
      img {
        height: 150px;
        width: 103px;
        &.box_bg{
          position: absolute;
          width:103px;
          height:150px;
          top:0;
          left: 0;
          z-index: 100;
        }
      }
    }
  }

  ._img_name {
    width: 70px;
    height: 30px;
    @include fontSCRegular;
    line-height: 30px;
    margin: 10px auto;
    position: absolute;
    font-size: 9px;
    font-weight: 400;
    color: #FFFFFF;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    top: 60px;
    right: 15px;
  }

  ._img_level {
    position: absolute;
    font-size: 9px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFFFFF;
    width: 40px;
    height: 20px;
    line-height: 20px;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    top: 10px;
    right: 10px;
  }
  ._img_zl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    @include fontSCRegular;
    font-weight: 400;
    color: #FFB522;
    width: 67px;
    height: 25px;
    background: rgba(0, 0, 0, .79);
    border-radius: 8px;
    line-height: 25px;
    top: 115px;
    white-space: nowrap;
  }
  ._img_select {
    width: 22px;
    height: 22px;
    border: 1px solid #fff;
    cursor: pointer;
    margin: 8px auto;
  }
  ._img_patch_up {
    width: 22px;
    height: 22px;
    cursor: pointer;
    margin: 8px auto;
    background: url("@/assets/selectcard/iocn_pitch_up.png") no-repeat center;
    background-size: cover;
  }
  ._main_3 {
    @include flex;
    height: 55px;
    width: 100%;
    background: $color;
    position: fixed;
    bottom: 0;
    z-index: 1000;
    padding: 0 15px;
    div {
      &:nth-child(1) {
        font-size: 16px;
        @include fontTCMedium;
        font-weight: 600;
        color: #2D160D;
      }
      &:nth-child(2) {
        width: 76px;
        height: 33px;
        background: #845F49;
        border-radius: 4px;
        font-size: 13px;
        @include fontSCRegular;
        font-weight: 400;
        color: #2D160D;
        line-height: 33px;
      }
    }
  }
</style>
